<template>
	<div style="">
		<!--<top-nav bgColor="white" title="新加工厂"  btnName="新加工厂"  :rightShow="false" returnPath="factoryList"></top-nav>-->
	
		<section style="height: 3rem;"></section>
		
		<section style="width: 100%;justify-content: center;align-items: center;display: flex;">
			<section style="width: 60%;display: flex;flex-direction: column;">
				<mu-select label="请选择" v-model="factoryId" full-width>
					<mu-option v-for="item,index in options" :key="item.id" :label="item.factoryname" :value="item.id"></mu-option>
				</mu-select>
				
				
				<mu-text-field v-model="userName" placeholder="请输入用户名"></mu-text-field>
			  	<div class="aboutpass">
					<mu-text-field v-model="password" placeholder="请输入用户密码" v-if="ifDisplay" type="password" ></mu-text-field>
					<mu-text-field v-model="password" placeholder="请输入用户密码" v-else type="text"></mu-text-field>		  	
			  	  <span v-show="ifDisplay" @click="ifDisplay=!ifDisplay">显示密码</span>
			  	  <span v-show="!ifDisplay" @click="ifDisplay=!ifDisplay">隐藏密码</span>
			  	 </div>  	
			  	<section style="margin-top: 2rem;display: flex;justify-content: center;justify-content:space-between;align-items: center;flex-direction: row;" >
			  		
					<mu-button  @click="gotoAddress('factoryList')">返回</mu-button>
					<mu-button color="primary"  @click="BindNewServer()">绑定</mu-button>
				</section>
			  	 
			</section>
			
			
		</section>
		
	</div>
</template>

<script>
	export default {
    data() {
      return {
        options: [],
        factoryId: '',
        userName:'',
        password:'',
        confirmPassword:'',
        
        psd:'',
        ifDisplay:false
        
      }
    },
    mounted(){ 
    	this.getUnBindlist()
    },
    methods:{
    		gotoAddress(path){
				var self=this
				setTimeout(function(){
					self.$router.push(path)
				},200)
	      	},
    	getUnBindlist(){
    		let that=this
    		that.axios.get(that.global.homeSrc+'/factory/getFactoryList').then(function(response){
		 		that.options=response.data.data
//		 		that.gotoAddress({path:'index2'})
		 	}).catch(function(error){
		 		console.info(error)
		 	})
		},
		BindNewServer(){
			let that=this
			that.axios.post(that.global.homeSrc+'/factoryUser/BindingFactoryUser',{
				'facotryUsername':that.userName,
				'password':that.password,
				'factoryId':that.factoryId,
				'imei':localStorage.userNumber,//全局存储openid
			}).then(function(response){
		 		console.info(response.data)
		 		if(response.data.code!=500){
		 			if(response.data.data.state=="ok"){
		 		         // that.$message({type: 'info',message: '绑定成功',duration:1500});
						 that.$toast.success('绑定成功');
		 		         that.$router.replace("factoryList")
		 		     }else{
		 		     	//that.$router.go(-1)
						that.$toast.error('绑定失败,原因:'+response.data.data.msg);
					   //that.$message({type: 'info',message: '登录失败,原因:'+response.data.data.msg,duration:1500});
		 		     }
		 		}else{
					that.$toast.error('绑定失败，原因:'+response.data.msg);
		 		// that.$message({type: 'info',message: '绑定失败，原因:'+response.data.msg,duration:1500});	
		 		}
		 	}).catch(function(error){
		 		console.info(error)
				that.$toast.error('绑定失败，原因:'+response.data.msg);
		 		// that.$message({type: 'info',message: '绑定失败'+error.Message,duration:1500});
		 		that.$router.replace("factoryList")
		 	})
		},
		clearPassword:function(){
			this.psd='';
		}
    }
  }
</script>

<style>

	.aboutpass{
      margin-top: 2rem;;
     }
      .aboutpass .psd{
      width:99.9%; 
      }
     .aboutpass span{
      color:#bfbfbf;line-height:40px;float:right;
     }
</style>